<template>
  <div class="box">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <el-form
          class="jibenform"
          ref="addform"
          :model="addform"
          label-width="80px"
          :rules="rules"
        >
          <el-form-item label="工号" prop="gh">
            <el-input
              name="gh"
              v-model="addform.gh"
              placeholder="请输入"
              auto-complete="on"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="xm">
            <el-input
              v-model="addform.xm"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="xb">
            <el-select v-model="addform.xb" placeholder="请选择" clearable>
              <el-option
                v-for="item in xb"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="民族" prop="mz">
            <el-input
              v-model="addform.mz"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="政治面貌" prop="zzmm">
            <el-select
              clearable
              v-model="addform.zzmm"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in zzmm"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份证号" prop="sfzh">
            <el-input
              v-model="addform.sfzh"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="出生日期" prop="csrq">
            <div class="birthdate">
              <el-date-picker
                v-model="addform.csrq"
                align="right"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                clearable
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="婚姻状况" prop="hyzk">
            <el-select
              clearable
              v-model="addform.hyzk"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in hyzk"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入职时间" prop="rzsj">
            <div class="block">
              <el-date-picker
                v-model="addform.rzsj"
                align="right"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                clearable
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="二级学院" prop="ejxy">
            <el-select
              clearable
              v-model="addform.ejxy"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in ejxy"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位分类" prop="gwfl">
            <el-select
              clearable
              v-model="addform.gwfl"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in gwfl"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="行政职务" prop="xzzw">
            <el-input
              v-model="addform.xzzw"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="行政级别" prop="xzjb">
            <el-select
              clearable
              v-model="addform.xzjb"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in xzjb"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="属性分类" prop="sxfl">
            <el-select
              clearable
              v-model="addform.sxfl"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in sxfl"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="教师职称" prop="jszc">
            <el-select
              clearable
              v-model="addform.jszc"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in jszc"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位职级" prop="gwzj">
            <el-select
              clearable
              v-model="addform.gwzj"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in gwzj"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="最高学历" prop="zgxl">
            <el-select
              clearable
              v-model="addform.zgxl"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in zgxl"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="最后学位" prop="zhxw">
            <el-select
              clearable
              v-model="addform.zhxw"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in zhxw"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="毕业院校" prop="byyx">
            <el-input
              v-model="addform.byyx"
              placeholder="与最高学历毕业证上名称一致"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="所学专业" prop="sxzy">
            <el-select
              clearable
              v-model="addform.sxzy"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in sxzy"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="display: none" label="" prop="sfwfdy">
            <el-input
              v-model="addform.sfwfdy"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item class="nonebling" label="学缘机构" prop="xyjg">
            <el-select
              clearable
              v-model="addform.xyjg"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in xyjg"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="nonebling" label="工作状态" prop="gzzt">
            <el-select
              clearable
              v-model="addform.gzzt"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in gzzt"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="联系电话" prop="lxdh">
            <el-input
              v-model="addform.lxdh"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item class="nonebling" label="电子邮箱" prop="dzyx">
            <el-input
              v-model="addform.dzyx"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item id="photo" label="工作证照" prop="gzzz">
            <el-upload
              class="avatar-uploader"
              :headers="headers"
              action="http://192.168.31.185:8080/common/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="addform.gzzz"
                :src="'http://192.168.31.185:8080' + addform.gzzz"
                class="avatar tximg"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="tishiyu"
              >单文件大小请在1M以内，仅支持JPG、JPEG、PNG格式</span
            >
          </el-form-item>
          <el-form-item id="lastitem">
            <el-button @click="resetForm('addform')">重置</el-button>
            <el-button class="cha" type="primary" @click="submitForm('addform')"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="成长经历">
        <chengzhangjingli :cldgh="addform.gh"></chengzhangjingli>
      </el-tab-pane>
      <el-tab-pane label="职业发展">
        <zhiyefazhan :cldgh="addform.gh"></zhiyefazhan>
      </el-tab-pane>
      <el-tab-pane label="教学情况">
        <jiaoxueqingkuang :cldgh="addform.gh"></jiaoxueqingkuang>
      </el-tab-pane>
      <el-tab-pane label="科研情况">
        <keyanqingkuang :cldgh="addform.gh"></keyanqingkuang
      ></el-tab-pane>
      <el-tab-pane label="考核评价">
        <kaohepingjia :cldgh="addform.gh"></kaohepingjia>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ajax from "../api/ajax.js";
import qs from "qs";
import $ from "../assets/jquery.min.js";
import chengzhangjingli from "../components/xinzengjiaoshi/chengzhangjingli.vue";

import jiaoxueqingkuang from "../components/xinzengjiaoshi/jiaoxueqingkuang.vue";
import kaohepingjia from "../components/xinzengjiaoshi/kaohepingjia.vue";
import keyanqingkuang from "../components/xinzengjiaoshi/keyanqingkuang.vue";
import zhiyefazhan from "../components/xinzengjiaoshi/zhiyefazhan.vue";
export default {
  components: {
    chengzhangjingli,

    jiaoxueqingkuang,
    kaohepingjia,
    zhiyefazhan,
    keyanqingkuang,
  },

  data() {
    return {
      headers: "",
      //日期选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      imageUrl: "",
      activeName: "first",
      cldgh: "",
      addform: {
        gh: "",
        xm: "",
        xb: "",
        mz: "",
        id: "",
        zzmm: "",
        sfzh: "",
        csrq: "",
        hyzk: "",
        rzsj: "",
        ejxy: "",
        gwfl: "",
        xzzw: "",
        xzjb: "",
        sxfl: "",
        jszc: "",
        gwzj: "",
        zgxl: "",
        zhxw: "",
        major: "",
        byyx: "",
        sxzy: "",
        xxjg: "",
        gzzt: "",
        lxdh: "",
        dzyx: "",
        gzzz: "",
        sfwfdy: "1",
      },
      //规则
      rules: {
        gh: [{ required: true, message: "必填", trigger: "blur" }],
        xm: [{ required: true, message: "必填", trigger: "blur" }],
        xb: [{ required: true, message: "必填", trigger: "change" }],
        mz: [{ required: true, message: "必填", trigger: "blur" }],
        zzmm: [{ required: true, message: "必填", trigger: "change" }],
        sfzh: [{ required: true, message: "必填", trigger: "blur" }],
        csrq: [{ required: true, message: "必填", trigger: "blur" }],
        hyzk: [{ required: true, message: "必填", trigger: "change" }],
        rzsj: [{ required: true, message: "必填", trigger: "blur" }],
        ejxy: [{ required: true, message: "必填", trigger: "change" }],
        gwfl: [{ required: true, message: "必填", trigger: "change" }],
        xzzw: [{ required: true, message: "必填", trigger: "blur" }],
        xzjb: [{ required: true, message: "必填", trigger: "change" }],
        sxfl: [{ required: true, message: "必填", trigger: "change" }],
        jszc: [{ required: true, message: "必填", trigger: "change" }],
        gwzj: [{ required: true, message: "必填", trigger: "change" }],
        zgxl: [{ required: true, message: "必填", trigger: "change" }],
        zhxw: [{ required: true, message: "必填", trigger: "change" }],
        byyx: [{ required: true, message: "必填", trigger: "blur" }],
        sxzy: [{ required: true, message: "必填", trigger: "change" }],
        lxdh: [{ required: true, message: "必填", trigger: "blur" }],
        gzzz: [{ required: true, message: "必填", trigger: "change" }],
      },
      //性别
      xb: [],
      //政治面貌
      zzmm: [],
      //婚姻状况
      hyzk: [],
      //二级学院
      ejxy: [],
      //岗位分类
      gwfl: [],
      //行政级别
      xzjb: [],
      //属性分类
      sxfl: [],
      //教师职称
      jszc: [],
      //岗位职级
      gwzj: [],
      //最高学历
      zgxl: [],
      //最后学位
      zhxw: [],
      //学缘机构
      xyjg: [],
      //工作状态
      gzzt: [],
      //所学专业
      sxzy: [
        { dictValue: "电子信息科学与技术", dictLabel: "电子信息科学与技术" },
        { dictValue: "会计税务", dictLabel: "会计税务" },
        { dictValue: "体育艺术", dictLabel: "体育艺术" },
      ],
    };
  },
  created() {
    this.headers = {
      Authorization: "Bearer " + sessionStorage.getItem("token"),
    };

    if (window.sessionStorage.getItem("userxinxi")) {
      this.addform = JSON.parse(window.sessionStorage.getItem("userxinxi"));
      console.log(this.addform.gzzz);
    }
    console.log(this.addform);
  },
  mounted() {
    this.getdatalist();
    this.getuserejxy();
  },
  beforeDestroy() {
    window.sessionStorage.removeItem("userxinxi");
  },
  methods: {
    async gettouxiang() {
      const result = await ajax("common/upload", "", "post");
      console.log(result);
      // this.action = result;
    },
    handleAvatarSuccess(res, file) {
      this.addform.gzzz = res.fileName;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isLt1M) {
        this.$message.error("上传头像图片大小不能超过 1MB!");
      }

      if (isJPG) {
        // this.$message.error("上传头像图片只能是 JPG、png、jpeg 格式!");
        return isJPG && isLt1M;
      }
      if (isPNG) {
        // this.$message.error("上传头像图片只能是 JPG、png、jpeg 格式!");
        return isPNG && isLt1M;
      }
      if (!isPNG || !isJPG) {
        this.$message.error("上传头像图片只能是 JPG、png、jpeg 格式!");
      }

      return isJPG && isLt1M;
    },
    //重置
    resetForm(addform) {
      this.$refs[addform].resetFields();
      this.imageUrl = "";
    },
    //保存
    async submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (window.sessionStorage.getItem("userxinxi")) {
            let headers = {
              Authorization: "Bearer " + sessionStorage.getItem("token") || "",
            };
            $.ajax({
              url: "http://192.168.31.185:8080/fdyxxb",
              type: "put",
              headers: headers,
              data: this.addform,
              success: (res) => {
                console.log(res);
                this.$message.success("修改成功");
              },
              error: (res) => {
                this.$message.success("修改失败");
              },
            });
          } else {
            const result = await ajax(
              "fdyxxb",
              qs.stringify(this.addform),
              "post"
            );
            if (result.code !== 200) {
              console.log(result);
              return this.$message.error("添加失败,请检查网络");
            }
            console.log(qs.stringify(this.addform));
            this.$message.success("添加成功");
            this.$router.push("/teacherlist");
          }

          // this.addform
        } else {
          return false;
        }
      });
    },
    //获取下拉列表
    async getdatalist() {
      const result = await ajax("system/dict/data/list", "", "get");
      console.log(result);
      for (var i in result.rows) {
        if (result.rows[i].dictType == "sys_user_sex") {
          this.xb.push(result.rows[i]);
        }
        if (result.rows[i].dictType == "sys_user_zzmm") {
          this.zzmm.push(result.rows[i]);
        }
        if (result.rows[i].dictType == "sys_user_hyzk") {
          this.hyzk.push(result.rows[i]);
        }
        if (result.rows[i].dictType == "sys_js_gwfl") {
          this.gwfl.push(result.rows[i]);
        }
        if (result.rows[i].dictType == "sys_js_xzjb") {
          this.xzjb.push(result.rows[i]);
        }
        if (result.rows[i].dictType == "sys_js_sxfl") {
          this.sxfl.push(result.rows[i]);
        }
        if (result.rows[i].dictType == "sys_js_jszc") {
          this.jszc.push(result.rows[i]);
        }
        if (result.rows[i].dictType == "sys_js_gwzj") {
          this.gwzj.push(result.rows[i]);
        }
        if (result.rows[i].dictType == "sys_js_zgxl") {
          this.zgxl.push(result.rows[i]);
        }
        if (result.rows[i].dictType == "sys_js_zhxw") {
          this.zhxw.push(result.rows[i]);
        }
        if (result.rows[i].dictType == "sys_js_xyjg") {
          this.xyjg.push(result.rows[i]);
        }
        if (result.rows[i].dictType == "sys_js_gzzt") {
          this.gzzt.push(result.rows[i]);
        }
      }
      // console.log(this.zzmm);
    }, //二级学院下拉菜单
    async getuserejxy() {
      const result = await ajax(
        "system/dept/treeselect",
        { deptType: 2 },
        "get"
      );
      this.ejxy = JSON.stringify(result.data);
      this.ejxy = JSON.parse(this.ejxy);
      console.log(this.ejxy);
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
}
.el-tabs {
  background: #fff;
}
.jibenform {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  .el-form-item {
    color: #333;
    font-family: Pingfang Regular;
    margin-bottom: 28px;
    margin-left: 25px;
    width: 450px;
  }
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 100%;
  height: 100%;
  display: block;
}

.tishiyu {
  width: 413px;
  position: absolute;
  bottom: -22px;
  color: red;
  font-size: 16px;
  font-family: Pingfang Medium;
}

.erjititle {
  color: #333;
  font-family: PingFang Medium;
}
</style>